<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <h1>POST请求</h1>
  <!--用form表单来写 -->
   <form id="form">
       <input type="text" name="name">
       <input type="text" name="age">
       <input type="text" name="sex">
       <button id="btn">提交</button>
   </form>
   <script>
       const Oform =document.getElementById('form')
    //  #form input[name=name]这个是属性名选择器
       const OName =document.getElementById('#form input[name=name]')
       const OAge =document.getElementById('#form input[name=age]')
       const Osex =document.getElementById('#form input[name=sex]')
       const oBtn =document.getElementById('btn')
    
    // 绑定一个表单被提交事件
    Oform.onsubmit=function(){
        // 收集表单
        const nameValue=OName.Value
        const ageValue=OAge.Value
        const sexValue=Osex.Value
// 创建一个构造函数XMLHttpRequest是构造函数上的一个方法
        const xhr =new XMLHttpRequest();
        // 请求方式：文件参数1：请求类型 参数2：路径 参数3：是否是异步
        xhr.open("post","/dbede",true)

// 请求体的数据放在send中传递
        // xhr.send('use=laoli&pass=1234')
    //   添加一个请求头因为请求体类型有很多,所以发送请求的时候一定要设置请求头的Content-Type类型
      // xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
      // xhr.send(`name=${nameValue}&age=${ageValue}&sex=${sexValue}`);

        xhr.setRequestHeader("Content-Type","application/json;chaarset=utf-8")
        xhr.send(JSON.stringify({
            name:nameValue,
            age:ageValue,
            sex:sexValue
        }))

        //  写入流式读取
        xhr.onreadystatechange=function(){
            if(xhr.readyState===4 &&(xhr.status>=200 &&xhr.status<=299)){
                console.log(xhr.responseText);
            }
        }
//    返回值没有被档住
        return false
    }
    
    </script>
</body>
</html>